<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .box{
            width: 300px;
            height: 300px;
            border: 20px rgba(238, 211, 211, 0.8) solid;
            margin: 100px auto;
            background-image: url(./img/a.jpg);
            /* background-repeat: no-repeat; */
            padding: 30px;
            /* 
              设置背景的范围 
                    background-clip (可以为背景颜色设置也可以为背景图片设置)
                        可选值：
                            border-box 默认值，背景会出现在边框的下边
                            padding-box 背景不会出现在边框，只出现在内容区和内边距
                            content-box 背景只会出现在内容区

                        
             */
             background-clip:content-box;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>